<template>
    <div class="list-container">
        <div class="list-title">歌曲列表</div>
        <ul v-for="(item,index) of songList" class="ul" :key="index"> 
            <li @click="clickSong(index)" class="li">
                <div class="count">{{index + 1}}</div>
                <div class="text">
                    <p class="name">{{item.name}}</p>
                    <p class="author">{{item.author}}</p>
                </div>
                <div class="iconfont play">&#xe621;</div>
            </li>
        </ul>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
    methods: {
        clickSong(index) {
            let songObj = {}
            let id = this.songList[index].id
            songObj = this.songList[index]
            // songObj.img = this.songList[index].picUrl
            // songObj.songName = this.songList[index].name
            // songObj.songAuthor = this.songList[index].author
            this.$router.push(`/songPlay/${id}`)
            this.$store.commit('songList/MUSIC_IMG',songObj)
            this.$store.commit('songList/MUSIC_LIST_INDEX',index)
            this.$store.commit('songList/SONG_LIST',this.songList)
        },
        ...mapMutations([
            'songList/MUSIC_IMG',
            'songList/MUSIC_LIST_INDEX',
            'songList/SONG_LIST'
        ])
    },
    props: {
        songList: {
            type: Array,
            default() {
                return []
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .list-title {
        width: 100%;
        height: 60px;
        padding: 0 25px;
        color: #666;
        line-height: 60px;
        background-color: #eeeff0;
    }
    .ul {
        display: flex;
        flex-direction: column;
        .li {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding-left: 40px;
            height: 175px;
            border-bottom: 2px solid #eee;
            .count {
                font-size: .45rem;
                width: 0.8rem;
                margin-right: .2rem;
                display: flex;
                justify-content: center;
                color: #999;
            }
            .text {
                line-height: 70px;
                width: 76%;
                .name {
                    font-size: 40px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
                .author {
                    font-size: 35px;
                    color: #888;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
            }
            .play {
                font-size: 70px;
                margin-right: 35px;
                color: #888;
            }
            
        }
    }
</style>